<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>店员管理</title>
    <meta th:replace="website/uc/inc_head.html" />
    <link rel="stylesheet" href="/static/css/uc.css">
</head>
<body>
<div th:replace="website/template/top.html"></div>
<!--面包-->

<div class="bread-crumb" style="padding:2.67vmin 2.67vmin;">
    <span th:replace="website/uc/inc_breadcrumb.html"></span>
    <span class="cur">店员管理</span>
</div>


<div class="content-page uc-page" id="app">
    <!--内容-->
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="grid">申请审核</a></legend>
    </fieldset>
    <table class="layui-table" v-cloak>
        <thead>
        <tr>
            <th>店铺名称</th>
            <th>申请人</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in listApply" :key="item.id">
            <td>{{item.shopName}}</td>
            <td>{{item.userName}}</td>
            <td><button class="layui-btn layui-btn-sm" @click="actApplyPass(item)">通过审核</button></td>
        </tr>
        </tbody>
    </table>

    <!--内容2-->
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="grid">当前店员管理</a></legend>
    </fieldset>
    <table class="layui-table" v-cloak>
        <thead>
        <tr>
            <th>店铺名称</th>
            <th>店员</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in listClerk" :key="item.id">
            <td>{{item.shopName}}</td>
            <td>{{item.userName}}</td>
            <td><button class="layui-btn layui-btn-sm layui-btn-danger" @click="actClerkDelete(item)">剔除</button></td>
        </tr>
        </tbody>
    </table>
</div>
<script th:src="@{/static/js/vue.js}"></script>
<script>
    // const layer = layui.layer
    var layerIndex
    const vm = new Vue({
        el: '#app'
        ,data: {
            listApply: [],
            listClerk:[],
        },
        created(){
            this.fetchDataApply()
            this.fetchDataClerk()
        },
        methods:{
            //加载审核数据 todo 不用分页
            fetchDataApply (){
                console.log('读取数据')
                layerIndex = layer.load(0, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $.ajax({
                    type: 'get',
                    url:'/web/shop/applyList',
                    data:{}
                }).done((res)=>{
                    if(res.code === 0) {
                        this.listApply = res.data.length > 0? res.data : [];
                    }
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)
                })
            },
            //加载店员数据  todo 不用分页
            fetchDataClerk (){
                console.log('读取数据')
                layerIndex = layer.load(0, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $.ajax({
                    type: 'get',
                    url:'/web/shop/clerkList',
                    data:{}
                }).done((res)=>{
                    if(res.code === 0 ){
                        this.listClerk = res.data.length > 0? res.data : []
                    }
                }).always(function(){
                    setTimeout(()=>{
                        layer.close(layerIndex)
                    },500)
                })
            },
            //通过申请
            actApplyPass(item){
                layer.confirm('确定通过申请吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    layer.closeAll()
                    layerIndex = layer.load(0, {shade: [0.1,'#fff']});
                    $.ajax({
                        type: 'post',
                        url:'/web/shop/agreeApply',
                        data:{id:item.id}
                    }).done((res)=>{
                        if(res.code == 0 ){
                            layer.msg('操作成功')
                            vm.fetchDataApply()
                            vm.fetchDataClerk()
                        }else{
                            layer.msg('操作失败了')
                        }
                    }).always(function(){
                        setTimeout(()=>{
                            layer.close(layerIndex)
                        },500)
                    })
                }, function(){

                });

            },
            //踢除店员
            actClerkDelete(item){
                layer.confirm('确定移除店员吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    layer.closeAll()
                    layerIndex = layer.load(0, {shade: [0.1,'#fff']});
                    $.ajax({
                        type: 'post',
                        url:'/web/shop/kickOut',
                        data:{
                            uid: item.uid,
                            sid: item.sid
                        }
                    }).done((res)=>{
                        if(res.code == 0 ){
                            layer.msg('操作成功')
                            vm.fetchDataApply()
                            vm.fetchDataClerk()
                        }else{
                            layer.msg(res.msg)
                        }
                    }).always(function(){
                        setTimeout(()=>{
                            layer.close(layerIndex)
                        },500)
                    })
                }, function(){

                });

            }
        }
    })
</script>
</body>
</html>